<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div style="padding-left: 30px; margin: 10px 0px">
      <Header headerNav="订单" />
      <!-- <button @click="add">添加数据</button> -->
    </div>
    <!-- 订单筛选 -->
    <HeaderTop
      :show="true"
      title="订单筛选"
      time="提交时间"
      buttonTitle="筛选"
      @submitBut="getChild"
      name="姓名"
      :flag="true"
      :timeShow="true"
      @selectValue="getSelectValue"
      @chooseTime="getTime"
    />
    <!-- 中间Content -->
    <div class="content">
      <div>
        <h3>订单列表</h3>
      </div>
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        " class="maxHeight"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="orderNumber"
          label="订单编号"
          width="180"
          text-aligin="center"
        >
        </el-table-column>
        <el-table-column prop="userName" label="用户昵称"></el-table-column>
        <el-table-column prop="userTel" label="手机号"></el-table-column>
        <el-table-column prop="className" label="课程名称"> </el-table-column>
        <el-table-column prop="orderPrice" label="订单金额"> </el-table-column>
        <el-table-column prop="orderState" label="订单状态"></el-table-column>
        <el-table-column prop="submitTime" label="提交时间"> </el-table-column>
        <el-table-column prop="查看" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.orderState == '已支付'"
              type="text"
              style="color: green"
              @click="see(scope.row)"
              >查看</el-button
            >
            <el-button
              v-if="scope.row.orderState == '未支付'"
              type="text"
              style="color: green"
              @click="see(scope.row)"
              >查看</el-button
            >
            <el-button
              v-if="scope.row.orderState == '已退款'"
              type="text"
              style="color: green"
              @click="see(scope.row)"
              >查看</el-button
            >
            <el-button
              v-if="scope.row.orderState == '未支付'"
              type="text"
              style="color: red"
              @click="del(scope.row)"
              >删除</el-button
            >
            <el-button
              v-if="scope.row.orderState == '已退款'"
              type="text"
              style="color: red"
              @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex">
        <el-button style="color: green" type="text" @click="exportExcel"
          >批量导出</el-button
        >
        <!-- 底部分页 -->
        <Paging
          v-if="curd.length > 0"
          :tableData="tableData.length"
          :pagesize="pagesize"
          :handleSizeChange="handleSizeChange"
          :handleCurrentChange="handleCurrentChange"
          :currentPage="currentPage"
        />
      </div>
      <!-- 弹框 -->
      <transition name="alertDong">
        <Alert
          class="alertBox"
          v-if="isShowAlert"
          order="订单详情"
          orderNumber="订单编号"
          userNames="用户昵称"
          classs="班级名称"
          price="订单金额"
          state="订单状态"
          time="提交时间"
          :orderBian="this.dataItem.orderNumber"
          :userName="this.dataItem.userName"
          :className="this.dataItem.className"
          :orderPrice="this.dataItem.orderPrice"
          :orderState="this.dataItem.orderState"
          :subTime="this.dataItem.submitTime"
          @isShowAlert="isShowAlertChild"
      /></transition>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Header from "../../../../components/header/index.vue";
import HeaderTop from "../../../../components/headerTop/index.vue";
import Alert from "../../../../components/alert/index.vue";
import Paging from "../../../../components/paging/index.vue";
export default {
  name: "",
  data() {
    return {
      tableData: [], //渲染页面总数据
      currentPage: 1, //展示第几页
      pagesize: 5, //一页显示几条数据
      searchData: "", //搜索内容,
      curd: [], //增删改查,
      dataItem: [], //后台返回的查看详情数据,
      isShowAlert: false, //控制alert弹框是否显示 true显示，false隐藏
      checkAll: false,
      checked: false,
      show: true,
    };
  },
  components: { Header, HeaderTop, Alert, Paging },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // 获取mysql订单管理数据
    // let res = await this.$axios.get("/api/users");
    // this.tableData = res.data;
    // this.curd = res.data;
    this.getZongData();
  },
  // Vue方法定义
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
    },
    // 获取子级传过来的值
    getChild(val) {
      // 搜索筛选数据
      if (val.subTime) {
        let [startTime, endTime] = val.subTime;
        console.log(startTime,endTime,'-------');
        this.tableData = this.curd.filter((item) => {
          let rowTime = new Date(item.submitTime);
          return (
            item.userName.includes(val.search) &&
            item.orderState.includes(val.orderState) &&
            rowTime >= startTime &&
            rowTime < endTime
          );
        });
      }
      this.tableData = this.curd.filter((item) => {
        return item.userName.includes(val.search);
      });
      this.tableData = this.curd.filter((item) => {
        return (
          item.userName.includes(val.search) &&
          item.orderState.includes(val.orderState)
        );
      });
    },
    // 获取下拉选择的值
    getSelectValue(val) {
      this.tableData = this.curd.filter((item) => {
        return item.orderState.includes(val);
      });
    },
    // 获取时间
    getTime(val) {
      let [startTime, endTime] = val;
      this.tableData = this.curd.filter((item) => {
        let rowTime = new Date(item.submitTime);
        return rowTime >= startTime && rowTime < endTime;
      });
    },
    // 实时更新数据
    async getZongData() {
      // 获取mysql订单管理数据
      let res = await this.$axios.get("/api/users");
      this.tableData = res.data;
      this.curd = res.data;
    },
    // 向mysql添加数据
    add() {
      console.log(4);
      let obj = {
        orderNumber: this.curd.length + 1,
        userName: "过量",
        userTel: 123456789,
        className: "2012",
        orderPrice: "545",
        orderFlag: "true",
        orderState: "未支付",
        submitTime: "2020.92.12",
      };
      this.$axios.post("/api/users/add", { obj });
      this.getZongData();
    },
    // 删除
    del(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          let id = row.orderNumber;
          console.log(id);
          this.$axios.post("/api/users/del", { id });
          this.getZongData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查看 打开弹框
    async see(row) {
      let id = row.orderNumber;
      this.isShowAlert = true;
      let dataItem = await this.$axios
        .post("/api/users/see", { id })
        .then((res) => {
          return res.data;
        });
      this.dataItem = dataItem;
    },
    // 隐藏弹框
    isShowAlertChild(val) {
      console.log(val);
      this.isShowAlert = val;
    },
    // 批量导出
    exportExcel() {
      require.ensure([], () => {
        const {
          export_json_to_excel,
        } = require("../../../../excel/Export2Excel");
        let tHeader = [
          "订单编号",
          "用户昵称",
          "手机号",
          "课程名称",
          "订单金额",
          "订单状态",
          "提交时间",
        ];
        const filterVal = [
          "orderNumber",
          "userName",
          "userTel",
          "className",
          "orderPrice",
          "orderState",
          "submitTime",
        ];
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "订单列表详情");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
};
</script>

<style lang="less" scoped>
/* @import url(''); 引入css类 */
.content {
  width: 95%;
  margin: 15px auto;
  background: #fff;
  border-radius: 5px;
  position: relative;
  > div:nth-child(1) {
    padding: 15px 0px;
    border-bottom: 1px solid #ccc;
  }
}
.maxHeight{
  width: 100%;
  height: 360px !important;
  overflow: auto  ;
}
.alertBox {
  transition: all 0.8s ease;
  width: 500px;
  height: 450px;
  background: #f1f1f1;
  border-radius: 10px;
  position: absolute;
  top: calc(50% - 250px);
  left: calc(50% - 225px);
  z-index: 999;
  padding: 0px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  overflow-y: auto;
}
.alertDong-enter {
  // transform:translateY(100%);
  opacity: 0.5;
}
.alertDong-enter-to {
  // transform: translateY((100%));
  opacity: 1;
}
.alertDong-leave-to {
  opacity: 0.5;
}
</style>